<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input size="small" v-model="formInline.name" placeholder="搜索任务名称"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="block">
          <el-date-picker v-model="formInline.startTime"  type="datetime" placeholder="选择时间"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="-">
        <div class="block">
          <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="选择时间"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="select()">选择显隐</el-button>
      </el-form-item> -->
    </el-form>
    <el-table :data="tableData" style="width: 100%" row-key="id" :empty-text="emptyText">
      <el-table-column fixed prop="id" label="任务ID"></el-table-column>
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="processInstanceId" label="流程实例ID"></el-table-column>
      <el-table-column prop="processInstanceName" label="流程实例名称"></el-table-column>
      <el-table-column prop="processDefinitionId" label="流程定义ID"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="Datetime"></el-table-column>
      <el-table-column fixed="right" label="流程进度" >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="流程明细" placement="top-start">
            <el-button type="primary" size="small" @click="detail(scope.row.processInstanceId)">
              <i class="el-icon-s-unfold"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip class="item itema" effect="dark" content="查看流程图" placement="top-start">
            <el-popover
              placement="left"
              trigger="click"
              style="padding-right:10px;padding-left:10px"
            >
              <img :src="lookImg(scope.row.processInstanceId)" />
              <el-button slot="reference" type="primary" size="small">
                <i class="el-icon-view"></i>
              </el-button>
            </el-popover>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="改派" placement="top-start">
            <el-button type="primary" size="small" @click="turnAnthorPerson(scope.row.id)">
              <i class="el-icon-edit-outline"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="任务办理" width="100px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="任务办理" placement="top-start">
            <el-button type="primary" size="small" @click="task(scope.row.id)">
              <i class="el-icon-edit-outline"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
       <el-table-column fixed="right" label="流程回退" width="100px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="流程回退" placement="top-start">
            <el-button type="primary" size="small" @click="backService(scope.row.processInstanceId,scope.row.id)">
              <i class="el-icon-refresh-left"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <Select ref="Sel" @refresh="fetch" @send="getChildData"></Select>
    <Detail ref="Det" @refresh="fetch"></Detail>
    <Back ref="Back" @refresh="fetch"></Back>
    <reassignment ref="reassignment" @refresh="fetch"></reassignment>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import Detail from "./detail"
import Select from "./select"
import Back from "./back"
import page from "@/components/basic-page/page";
import reassignment from "./reassignment"
import { activeUrl } from "@/config/env";
const urls = {
  list: activeUrl + "/todoTaskList",
  imgPath: activeUrl + "/instance/getImg?processInstanceId=",
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    detail(processInstanceId) {
      // 任务明细
      this.$refs.Det.show(processInstanceId)
    },
    select(){
      var cityOptions = ['任务ID','任务名称','流程实例ID','流程实例名称','流程定义ID','创建时间'];
      this.$refs.Sel.show(this.tableData,cityOptions);
    },
    turnAnthorPerson(id) {
      // 任务委派
      this.$refs.reassignment.show(id)
    },
    task(taskId) {
      // 任务办理
      var item = {
        name: "任务办理：" + taskId,
        path: activeUrl + "/resource/form/form.html?task_id=" + taskId,
        icon: "icon-caidan",
        children: []
      };
      this.$store.commit("SET_MENUID", item);
      this.$router.push({
        path: this.$router.$avueRouter.getPath(
          {
            name: item.name,
            src: item.path
          },
          item.meta
        ),
        query: item.query
      });
    },
    lookImg(processInstanceId) {
      // 显示流程图
      return urls.imgPath + processInstanceId + '&' + new Date();
    },
    Datetime(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.createTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    fetch() {
      // 列表初始化
      axios.post(urls.list, this.formInline ).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    backService(processInstanceId,id){
      this.$refs.Back.show(processInstanceId,id)
    },
    getChildData(data) {
      console.log(data)
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        name: null,
        startTime: null,
        endTime: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: []   
      },
      tableData: [],
      value :[],
      emptyText : "加载中..."
    };
  },
  components: {
    Main,
    Detail,
    Back,
    reassignment,
    page,
    Select
  }
};
</script>